<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1" class="box">class为box的div1</div>
  <div id="div2" class="box">class为box的div2</div>
  <div id="div3">div3</div>
  <span class="box">class为box的span</span>
  <br>
  <ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDD</li>
    <li title="two">BBBBB</li>
    <li style="display: none;">我本来是隐藏的</li>
  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      // 1.选择第一个div
      // $('div:first').css({
      //   background: 'red'
      // })

      // 2.选择最后一个class为box的元素
      // $('.box:last').css({
      //   background: 'red'
      // })

      // 3.选择所有class属性不为box的div
      // $('div:not(.box)').css({
      //   background: 'red'
      // })

      // 4.选择第二个和第三个li元素 打开chm文档看一下 可以画图演示一下
      // 多个选择器不是同时执行的，而是依次执行的
      // $('li:gt(0):lt(2)').css({ //如果是先大于 我们要记住 大于是一个筛选条件 我们的小于是基于大于条件后进行的 画图演示 记住 多个选择器条件不是同时执行，而是依次执行
      //   background: 'red'
      // })
      // $('li:lt(3):gt(0)').css({
      //   background: 'red'
      // })

      // 使用eq来选择第二个和第三个
      // $('li:eq(1)').css({
      //   background:'red'
      // })
      // $('li:eq(2)').css({
      //   background:'red'
      // })


      // 5.选择内容为BBBBB的li 内容过滤器
      // $('li:contains("BBBBB")').css({
      //   background: 'red'
      // })

      // 6.选择隐藏的li 可见性过滤器
      // console.log($('li:hidden').length, $('li:hidden')[0]);

      // 7.选择有title属性的li元素 属性过滤器
      // $('li[title]').css({
      //   background: 'red'
      // })

      // 8.选择所有属性title为hello的li元素
      // $('li[title=hello]').css({
      //   background: 'red'
      // })
    })
    
  </script>
</body>
</html>